var buttonVolver = [{
	ui: 'back',
	text: 'Volver',
	handler: function()
		{
			window.open("menu.html","_self");
		}
	},
	{
		xtype: 'spacer'
	}
]

var dockedItems = [{
	xtype: 'toolbar',
	title: 'Lista de Materiales',
	dock: 'top',
	ui: 'dark',
	items: buttonVolver
}]

var tplLM = 
	'<div class="materialItem">'+
		'<div class="item-img"><img src="resources/images/mat_icon.png" width="50" height="50"></div>'+
		'<div style="float:left; width:83%;">'+
		'<div class="list-codigo">'+
			'<span>{CodMaterial}&nbsp;&nbsp;&nbsp;{CodUMedida}-{UMedidaRendimiendo}</span>'+
			'<br />'+
			'{DescMaterial}'+
		'</div>'+
		'<div class="list-peso">'+
			'<span>Peso: {Peso} KG&nbsp;UN&nbsp;&nbsp;&nbsp;Precio: {PrecioUnit} PEN</span>'+
			'<br />'+
			'<span>Stock: {Stock}</span>'+
		'</div>'+
		'</div>'+
	'</div>';

listaMatView = Ext.extend(Ext.Panel, 
{
	fullscreen: true,
	layout: 'card',
		
	initComponent: function() 
	{
		this.listaMAT = new Ext.List(
		{
			id: 'listaMAT',
			grouped: false,
			itemTpl: tplLM,
			loadingText: false,
			store: listaMatStore			
        });
		
		this.crearDocPanel = new Ext.Panel(
        {
			layout: 'fit',
			dockedItems: dockedItems,
			items: this.listaMAT
		});		
        
        this.items = this.crearDocPanel;
        listaMatView.superclass.initComponent.call(this);
	}
});

Ext.reg('listaMatView', listaMatView);